<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>伪类制作小图标</title>
        <style>
        	ul,li{list-style: none;}
        	li{
        		width:300px;
        		height: 30px;
        		line-height: 30px;
        		text-align: center;
        		border:1px solid #000;
        		margin-bottom: 10px;
        	}
        	li:first-child:before{
				content: '';
				height:0;
        		border:10px solid transparent;
        		border-left:10px solid #f00;
        		display: inline-block;
        		position: relative;
        		top:3px;
        	}
            li:last-child:before{
                content: '';
                height:0;
                border:10px solid transparent;
                border-left:10px solid #f00;
                display: inline-block;
                position: relative;
                top:3px;
            }
            li:last-child:after{
                content: '';
                border: 8px solid transparent;
                border-left: 10px solid #fff;
                display: inline-block;
                position: relative;
                top: 1px;
                left: -53px;
            }
        </style>
    </head>
    <body>
    	<ul>
    		<li>首页</li>
    		<li>分类</li>
    	</ul>
    </body>
</html>